<script>
import Vue, {defineComponent} from 'vue'
import index from "vuex";
import moment from "moment"
Vue.prototype.$moment = moment;
export default defineComponent({
    name: "xView",
    computed: {
        index() {
            return index
        }
    },
    data(){
        return{
            timeRange:[],
            carList:[
                {
                    id:1,
                    carName: '奔驰',
                    cTime: ""
                },
                {
                    id:2,
                    carName: '宝马',
                    cTime:''
                },
            ],
            carList2: [
                {
                    id: 1,
                    carName: '奔驰',
                    cTime: ''
                },
                {
                    id: 2,
                    carName: '宝马',
                    cTime: ''
                }
            ],
            carId:'',
            carName: '',
            searchWorld:'',
            index1:'',
            changeBeforeID:'',
            changeNextID:'',
            start:'',
        }
    },
    methods:{
        // 添加
        add() {
            let obj = {
                id : this.carId,
                carName:this.carName,
                cTime: new Date()
            }
            if(this.carList.find(item => item.id === this.carId)){
                alert('id重复了')
            }else {
                this.carList.push(obj)
            }
            localStorage.setItem("name",JSON.stringify(this.carList))
        },
    //    删除
    //
        del(index){
            this.index1=index;
            console.log(index);
            // this.carList.splice(this.carList.indexOf(index),1)
        },

        Delete(){
            this.carList.splice(this.carList.indexOf(this.index1),1)
            localStorage.setItem("name",JSON.stringify(this.carList))
        },
    //     修改
        get(index){
            this.changeBeforeID=index.carName;
            console.log(index.carName);
        },
        setName(item){
            console.log(item)
            item.carName = this.changeNextID;
            localStorage.setItem("name",JSON.stringify(this.carList))
        },
    // 搜索
        search() {
            return this.carList.filter((item)=>{
                return item.carName.includes(this.searchWorld)
            })
        }
    },
//     局部过滤器与data和methods是同级
// 过滤器 filter （过滤器的名字,回调函数 == callback）
// 回调函数（data，format ）data管道前面的数据，format是过滤器传递的参数
    filters:{
        setTime(data,type){
            console.log(data)
            console.log(type)
            // let y = data.getFullYear()
            //  padStart() 往前面补  1、位数  2、补的数据
            //  padEnd() 往后面补
            // let m = (data.getMonth()+1).toString().padStart(2,"0")
            //
            // let d = (data.getDate()).toString().padStart(2,"0")
            // console.log((data.getDate()).toString().padStart(2,"0"))
        },

    },
//     mounted。js用于写时间的
    mounted() {
        let start = this.$moment()
            // .subtract('1', 'd')
            .format('YYYY-MM-DD HH:mm:ss') //当前时间往前推1天（24小时）：
        //let end = "";//this.$moment().format('YYYY-MM-DD HH:mm:ss');
        this.timeRange=start
    },
    created() {
        this.carList=JSON.parse(localStorage.getItem("name"))||this.carList
    },
})
</script>

<template>
<div>
<!--    监听所有按键：v-on:keyup
         监听指定按键：v-on:keyup.按键码-->
<!--    momnt时间节点-->
<!--    <div>{{timeRange}}</div>-->
    <div class="container">
        <div class="card">
            <div class="card-header">
                添加品牌
            </div>
            <div class="card-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Id</label>
                        <input type="text" class="form-control" id="exampleInputEmail1"
                               aria-describedby="emailHelp" v-model="carId">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Name</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" v-model="carName">
                    </div>
                    <button type="button" class="btn btn-primary" @click="add">添加</button>
                    <div class="form-group">
                        <label for="exampleInputPassword1">搜索关键字</label>
                        <input @keyup="search" type="text" class="form-control" id="exampleInputPassword1" v-model="searchWorld">
                    </div>
                </form>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr v-for="(item) in search()" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.carName}}</td>
                        <td>{{timeRange}}</td>
                        <td>
                            <button type="button" class="btn btn-secondary" @click="get(item)" data-toggle="modal" data-target="#myModals">修改</button>
                            <div class="modal fade" id="myModals">
                                <div class="modal-dialog">
                                    <div class="modal-content">

                                        <!-- 模态框头部 -->
                                        <div class="modal-header">
                                            <h4 class="modal-title">提示</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>

                                        <!-- 模态框主体 -->
                                        <div class="modal-body">
                                            <p>修改之前的名字<input v-model="changeBeforeID" ></p>
                                            <p>修改之后的名字<input v-model="changeNextID"></p>
                                        </div>

                                        <!-- 模态框底部 -->
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary"  @click="setName(item)" data-dismiss="modal">确认</button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            &times;
                            <button type="button" class="btn btn-danger" data-toggle="modal" @click="del(item)" data-target="#myModal">删除</button>
                            <div class="modal fade" id="myModal">
                                <div class="modal-dialog">
                                    <div class="modal-content">

                                        <!-- 模态框头部 -->
                                        <div class="modal-header">
                                            <h4 class="modal-title">提示</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>

                                        <!-- 模态框主体 -->
                                        <div class="modal-body">
                                            请确认是否要删除
                                        </div>

                                        <!-- 模态框底部 -->
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-danger"  @click="Delete" data-dismiss="modal">确认</button>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
</template>

<style scoped lang="less">

</style>